import _ from 'lodash';
import * as React from 'react';
import { observer } from 'mobx-react';
import { Form, DatePicker } from 'antd';

var FormItem = Form.Item;

class DatePickerBean {
    store:any = {};
    fieldName:string = '';
    label:string = '';
    labelCol?:any = { span: 6 };
    wrapperCol?:any = { span: 18 };
    showTime?:boolean = true;
    format?:string = 'YYYY-MM-DD HH:mm:ss';
    placeholder?:string = '请填写';
    disabledDate?(value:any):boolean;
    onChange?(value:any):void;
}

@observer
export class DatePickerItem extends React.Component<DatePickerBean,any>{
    static defaultProps = _.toPlainObject(new DatePickerBean());

    render(){
        const DatePickerClassName = _.uniqueId('DatePickerClassName_');
        const {store, fieldName, label, labelCol, wrapperCol, showTime, format, placeholder} = this.props; 
        const item = store.fields[fieldName];

        return (
            <FormItem className = {DatePickerClassName}
                      label = {label}
                      labelCol= {labelCol}
                      wrapperCol= {wrapperCol} 
                      hasFeedback= {item.hasFeedback} 
                      required= {item.required}
                      help= {item.help}  
                      validateStatus= {item.validateStatus}>
                      <DatePicker style= {{ width: '100%' }}
                            disabledDate= {this.props.disabledDate} 
                            onChange= {this.props.onChange}
                            showTime= {showTime} 
                            format= {format} 
                            placeholder= {placeholder}
                            value= {item.value} 
                            disabled= {item.disabled}
                            getCalendarContainer = {()=> {
                                let element:any = document.querySelector(`.${DatePickerClassName}`);
                                return element;
                            }}/>
            </FormItem>
        )
    }
}